<template>
  <div class="my-form">
    <el-form :model="form" v-bind="formAttr">
      <el-form-item label="活动名称" v-for="item in compArr" :key="item.id" :prop="item.attr.prop">
        <!-- 通过is去确定渲染哪个表单，通过attr把数据传递下去，给el-input、el-select之类的组件使用的属性 -->
        <!-- optionArr传递下去给mySelect使用 -->
        <component :is="item.type" :form="form" :attr="item.attr" :optionArr="item.optionArr"></component>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import MyInput from "../components/formComponents/myInput.vue";
import MyDataPicker from "../components/formComponents/myDatePicker.vue";
import MySelect from "../components/formComponents/mySelect.vue";

export default {
  name: "MyForm",
  components: { MyInput, MyDataPicker, MySelect },
  props: {
    formAttr: {
      type: Object,
      default: () => { }
    },
    form: {
      type: Object,
      default: () => { }
    },
    compArr: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
    }
  }
};
</script>
<style scoped lang="scss"></style>